<template>
    <router-view></router-view>
    <div>
        <div class="login">
            <div class="login-title">
                <h1>苍术南星</h1>
                <form @submit.prevent="login">
                    <div class="form-group">
                        <label for="account">用户名</label>
                        <n-input round type="text" id="account" placeholder="请输入用户名" v-model="account"/>
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <n-input round type="password" show-password-on="click" id="password" minlength="6"
                                 placeholder="请输入密码"
                                 v-model="password"/>
                    </div>
                    <div class="form-button">
                        <n-button type="primary" @click="login">登录</n-button>
                        <n-button type="primary" @click="login">游客</n-button>
                    </div>
                </form>
            </div>
        </div>
        <Footer/>
    </div>
</template>


<script>
import router from "@/router";
import {md5} from "@/utils/md5";
import {NButton, NInput} from "naive-ui";
import Cookies from 'js-cookie';
import Footer from "@/components/layout/Footer.vue";
import Config from "@/config/Config";

export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Login',
    components: {
        Footer,
        NButton, NInput
    },
    methods: {
        login() {
            const loginInfo = {
                account: this.account,
                password: md5(this.password + "cangzhu")
            };
            fetch(Config.webUrl, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify(loginInfo)
            })
                .then(response => response.json())
                .then(responseData => {
                        if (responseData.responseCode === 200) {
                            alert(responseData.message);
                            Cookies.set("Authorization", "Bearer " + responseData.data.token, 100)
                            // 登录成功，跳转到首页
                            router.push('/')
                        } else {
                            alert(responseData.responseCode + responseData.message);
                        }
                    }
                )
                // eslint-disable-next-line no-unused-vars
                .catch(error => {
                    alert("服务器错误");
                });
        }
    }
};
</script>

<style scoped>
.login {
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 32px)
}

.login-title {
    padding: 30px;
    background-color: #ffffff;
    width: 30%;
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.form-button {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

label {
    font-weight: bold;
}

button {
    padding: 0.5rem 1rem;
    font-size: 1rem;
}
</style>
